﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/layui-v2.6.8/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" />
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

</head>
<body>
    <div class="demoTable">
        搜索ID：
        <div class="layui-inline">
            <input class="layui-input" name="keyName" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
        <button class="layui-btn" data-type="DepaAdd">添加</button>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs2">
            <div id="test1" class="demo-tree demo-tree-box"></div>
        </div>
        <div class="layui-col-xs10">
            <table class="layui-hide" id="demoTreeTb" lay-filter="demoTreeTb"></table>
        </div>
    </div>

    <table id="demoTreeTb"></table>

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <!-- 表格操作列 -->
    <script type="text/html" id="tbBar">
        <a class="layui-btn layui-btn-sm layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script src="~/layui-v2.6.8/layui-v2.6.8/layui/layui.js"></script>
    <script>

        //（4） 前端：浏览器请求服务器的时候，要带上JWT
        $.ajaxSetup({
            beforeSend: function (xhr) {
                if (localStorage.getItem("token") !== null) {
                    //（4） 前端：浏览器请求服务器的时候，要带上JWT
                    xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem("token"));
                }
            }
        });

        layui.config({
            base: '/layui-v2.6.8/layui-v2.6.8/'  // 配置模块所在的目录
        }).use(['treeTable'], function () {
            var treeTable = layui.treeTable;
            // 渲染树形表格
            var insTb = treeTable.render({
                elem: '#demoTreeTb',
                url: 'https://localhost:44398/api/DepartAPI/GetIndex',
                tree: {
                    iconIndex: 2,           // 折叠图标显示在第几列
                    isPidData: true,        // 是否是id、pid形式数据
                    idName: 'depaID',  // id字段名称
                    pidName: 'parentID',    // pid字段名称
                    openName: 'depaID'

                },
                cols: [[
                    { type: 'numbers' },
                    { type: 'checkbox' },
                    { field: 'depaName', title: '组织名称' },
                    { field: 'depaperson', title: '主负责人' },
                    { field: 'depaTelphone', title: '主负责人电话' },
                    { field: 'sort', title: '显示顺序' },
                    { fixed: 'right', title: '操作', toolbar: '#tbBar', width: 300 }
                ]]
            })


            // 工具列点击事件
            treeTable.on('tool(demoTreeTb)', function (obj) {
                var data = obj.data;
                //var event = obj.event;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            url: 'https://localhost:44398/api/DepartAPI/Delete?id=' + data.depaID,
                            type: 'post',
                            success: function () {
                                layer.msg("删除成功", { time: 2000, icon: 1 }, function () {
                                    parent.location.reload();
                                })

                            }
                        })
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 2,
                        area: ['700px', '700px'],
                        fixed: false, //不固定
                        maxmin: true,
                        title: '修改数据',
                        content: '/DepartWeb/Edit?id=' + data.depaID,
                    });
                }
            });

            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('demoTreeTb', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            id: demoReload.val()
                        }
                    });
                },
                DepaAdd: function () {
                    layer.open({
                        type: 2,
                        title: '添加数据',
                        area: ['1000px', '640px'], //宽高
                        content: '/DepartWeb/Create'
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        })

    </script>
</body>
</html>
